@mixin a(){
  $n: 1;
  $t: .1s;
  [n="1"] & {
    $n: 1;
  }
  [n="2"] & {
    $n: 2;
  }
  [n="3"] & {
    $n: 3;
  }
  [n="4"] & {
    $n: 4;
  }
  [n="5"] & {
    $n: 5;
  }
  [n="6"] & {
    $n: 6;
  }
  [n="7"] & {
    $n: 7;
  }
  [n="8"] & {
    $n: 8;
  }
  [n="9"] & {
    $n: 9;
  }
  @for $i from 1 through $n {
    &:nth-of-type(#{$i}) {
      z-index: -1;
      transition-delay: $i*$t;
      transform: translate3d(0, -28px, 0);
    }
  }
}

@mixin b(){
  $n: 1;
  $t: .1s;
  [n="1"] & {
    $n: 1;
  }
  [n="2"] & {
    $n: 2;
  }
  [n="3"] & {
    $n: 3;
  }
  [n="4"] & {
    $n: 4;
  }
  [n="5"] & {
    $n: 5;
  }
  [n="6"] & {
    $n: 6;
  }
  [n="7"] & {
    $n: 7;
  }
  [n="8"] & {
    $n: 8;
  }
  [n="9"] & {
    $n: 9;
  }
  @for $i from 1 through $n {
    &:nth-of-type(#{$i}) {
     transition-delay: ($n - $i)*$t;
      transform: translate3d(0, ($i - 1)*28px, 0);
    }
  }
}
